<template>
  <el-select
    style="width: 100%"
    size="mini"
    :value="value"
    clearable
    filterable
    :disabled="disabled"
    :placeholder="placeholder"
    :loading="expertListLoading"
    @input="change($event)">
    <el-option
      v-for="item in expertList"
      :key="item.expertId"
      :label="item.expertName"
      :value="item.expertId">
      <span style="float: left">{{ item.expertName }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px;">{{ item.unitName }}</span>
    </el-option>
  </el-select>
</template>

<script>
  import { getExpertList } from '@/utils/common'
  export default {
    name: 'expert-select',
    props: {
      value: {
        type: String
      },
      keyword: {
        type: String
      },
      disabled: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请输入姓名搜索'
      }
    },
    data () {
      return {
        expertList: null,
        expertListLoading: false,
        selectvalue: ''
      }
    },
    created () {
      this.getExpertList(this.keyword)
    },
    methods: {
      change: function (val) {
        this.$emit('input', val)
        this.$emit('changeFunction', val)
      },
      getExpertList: function () {
        this.expertListLoading = true
        getExpertList().then(({data}) => {
          this.expertListLoading = false
          this.expertList = data.expertList
        })
      }
    }
  }
</script>
